<template>
  <div class="page" style="">
    <div class="print_title">转正申请详情 · 禾美环保</div>
    <p class="title">基础信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px; margin: 0 0 14px 0;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.billNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.employeeId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >人员编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.employeeNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >性别:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.gender_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >出生日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ moment(formData.birthday).format('YYYY-MM-DD') }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >岗位序列:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.positionCategory_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >岗位名称:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.positionId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >毕业院校:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.graduatedFrom }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >学历:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.highestDegree_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所学专业:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.major }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >毕业时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.graduationDate }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所在部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.departmentId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <!-- <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >出生日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ moment(formData.birthday).format('YYYY-MM-DD') }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所在部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.departmentId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col> -->
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >入职日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.entryTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >职称:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.professionalTitle }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >职业资格:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.professionalQualification }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所属团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.teamId_dictText?formData.teamId_dictText:formData.teamId }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >非相关工作经验(年):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.workExperience }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >相关工作经验(年):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.relatedWorkExperience }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请转正日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.regularTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >试用期工资标准(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.salary }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >预计转正后薪级:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.regularScale_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >转正后确认薪级:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.salaryScale_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >公积金基数(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.providentFundBase }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >公积金购买单位:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.providentFundUnit_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >其他约定事项:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.remark }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- 员工试用期考核信息 -->
    <!-- <p class="title">员工试用期考核信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px; margin: 0 0 14px 0;">
      <a-col :span="24">
        <a-row style="margin-bottom: 0" justify="center">
          <a-col style="display: flex; align-items: center; justify-content: center;">
            <p style="margin-bottom: 0; white-space: nowrap" >查看员工试用期考核表</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row> -->

    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" v-if="purchaseFile && purchaseFile.length"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if=" dataHistorySource && dataHistorySource.length" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
  import { getAction, getFileAccessHttpUrl } from '@/api/manage'
  import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
  import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
  import address from '@/components/AddressChoice/address.js'
  import moment from 'moment';
  export default {
    props: {
      formBpm: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: () => {},
        required: true
      },
      formDataHistory: {
        type: Object,
        default: () => {}
      }
    },
    components: {
      FileInfor,
      ProcessInfor
    },
    data() {
      return {
        moment,
        address, // code地址
        getFileAccessHttpUrl,
        dictOptions: {},
        dataHistorySource: [], // 流程列表
        url: {
            historyList: '/api/erpmng/act/task/processHistoryList', // 流程历史跟踪接口
            queryById: '/api/erp/administration/seal/erpSealAuthorizationInformation/queryById' // 獲取詳情
        },
        purchaseFile: [], // 附件
        ids_dictText: '' // 印章
      };
    },
    watch: {
      formData: {
        handler (val) {
            if (val) {
              this.initDictConfig()
              if (val.attachment) {
                this.purchaseFile = val.attachment.split(',')
              }
            }
        },
        immediate: true
      },
      formDataHistory: {
			handler (val) {
				if (val) {
					this.getHistoryList()
				}
			},
			immediate: true
		}
    },
    methods: {
      // 获取列表
      getHistoryList() {
        var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
        getAction(this.url.historyList, params).then(res => {
          console.log('-----------流程打印-----------', res)
            if (res.success) {
                this.dataHistorySource = res.result.records || res.result
            }
        })
      },

      // 加载数据字典信息
      initDictConfig() {
        initDictOptions('erp_org_position_level,level_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'positionName', res.result)
          }
        })
        initDictOptions('sys_depart,depart_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'approvalUnit', res.result)
            this.$set(this.dictOptions, 'departId', res.result)
          }
        })
        initDictOptions('erp_omc_team_manager,alias_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'teamId', res.result)
          }
        })
        initDictOptions('sys_position,name,code').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'postCode', res.result)
          }
        })
        initDictOptions('YES_OR_NO').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'isDuty', res.result)
          }
        })
        initDictOptions('YES_OR_NO').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'isVirtual', res.result)
          }
        })
        initDictOptions('reward_punish_category').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'rewardPunishCategory', res.result)
          }
        })
      },

      // 地址查询
      getArea(json, code) {
        let names = [];
        let codes = [];
        function findCity(list, code, father) {
          const index = list.findIndex(ev => {
            return ev.code === code;
          });

          if (index > -1) {
            const child = list[index];
            names.unshift(child.name);
            codes.unshift(child.code);
            father && names.unshift(father.name) && codes.unshift(father.code);
            father && findCity(json || [], father.code);
            return;
          }
          list.map(item => {
            if (item.children) {
              findCity(item.children || [], code, item);
            }
          });
        }
        findCity(json, code);
        names = [...new Set(names)];
        codes = [...new Set(codes)];
        return { codes, names };
      },

      tableRowClass(record, index) {
        console.log('record, index', record, index)
        if (index == 0) {
            return 'rowClass';
        }
        return ''
      }
    }
  };
</script>
<style lang="less" scoped>
  .page{
    background: #ffffff;
    padding: 19px 28px 0 28px;
    width: 750px;
    .print_title{
        font-size: 15px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9px;
    }
    .title {
        background: #EEEEEE;
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        padding: 11px 9px;
    }
    .content {
        font-size: 13px;
    }

    .title_table{
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
    }
  }
  /deep/ .rowClass{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead th{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead tr{
      background: #EEEEEE;
  }
  /deep/ .ant-table-small > .ant-table-content > .ant-table-body {
      margin: 0 0px;
  }
  /deep/ .ant-table-body tr {
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-body tr td {
    word-wrap:break-word;
    word-break:break-all;
  }
  .content {
    font-size: 13px;
  }
</style>
